<template>
  <div style="width: 1400px; margin: auto">
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="query.name"
          placeholder="请输入物料编号/名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="query.materialtype"
          placeholder="请输入物料类型"
          clearable
        >
          <el-option
            v-for="(a, index) in Materialtypedata.value"
            :key="index"
            :label="a.text"
            :value="a.text"
          ></el-option>
        </el-select>
      </el-form-item>
      <p></p>
      <div v-show="showsta">
        <el-form-item>
          <el-select v-model="query.state" placeholder="请选择状态" clearable>
            <el-option label="全部" :value="-1" />
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
                  :options="options"
                  :show-all-levels="false"
                  placeholder="请选择物料分类"
                  v-model="query.materialclassify"
                  :props="{
                    label: 'label',
                    value: 'value',
                    children: 'children',
                  }"
                />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="query.materialProperty"
            placeholder="请选择物料属性"
            clearable
          >
            <el-option
              v-for="(a, index) in MaterialPropertydata.value"
              :key="index"
              :label="a.text"
              :value="a.text"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item> </el-form-item>
      </div>
      <el-button
        type="primary"
        style="float: right; margin-left: 10px"
        @click="InquirEvent"
        >查询</el-button
      >
      <el-button type="primary" style="float: right" @click="showsta=!showsta"
        >{{showsta==true?"收起":"展开"}}</el-button>
    </el-form>
    <el-button type="primary" @click="AddMaterial">新增</el-button>
    <el-button @click="down">导出</el-button>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" property="id" width="120">
      </el-table-column>
      <el-table-column label="物料编号" property="materialnumber" width="170">
        <template #default="scope">
          <el-butto style="color: darkgoldenrod;" @click="ToDetailsMaterial(scope.row.materialnumber)">{{scope.row. materialnumber }}</el-butto>
    
        </template>
      </el-table-column>
      <el-table-column label="物料名称" property="name" width="120">
      </el-table-column>
      <el-table-column
        label="规格型号"
        property="specificationsversion"
        width="120"
      >
      </el-table-column>
      <el-table-column label="单位" property="unit" width="120">
      </el-table-column>
      <el-table-column label="物料类型" property="materialtype" width="120">
      </el-table-column>
      <el-table-column label="物料属性" property="materialProperty" width="120">
      </el-table-column>
      <el-table-column
        label="物料分类"
        property="materialclassifyName"
        width="120"
      >
      </el-table-column>
      <el-table-column label="状态" property="state" width="120">
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="query.pageindex"
        v-model:page-size="query.pagesize"
        :page-sizes="[2, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Materialtype,download } from "../../api/Material";
import { GetDictionary } from "../../api/Dictionaries";
import { useRouter } from "vue-router";
import {
  ShowMaterial,
  // CodingGetId,
  // PutCoding,
} from "../../api/Material";
export default {
  setup() {

    
    const ToDetailsMaterial = (id) => {
      router.push({
        path: "/DetailsMaterial",
        query:{id:id}
      });
    };
    const InquirEvent = () => {
      if( query.materialclassify!=null)
      {
        query.materialclassify = parseInt(
        query.materialclassify[length + 1]
          );
      }
      getData();
    };
   //字典data
    const Materialtypedata = reactive([]);
    const Statedata = reactive([]);
    const MaterialPropertydata = reactive([]);
    //字典初始化
    const MaterialList = () => {
      GetDictionary("物料类型").then((res) => {
        Materialtypedata.value = res.result;
        console.log(Materialtypedata);
      });
      GetDictionary("物料属性").then((res) => {
        MaterialPropertydata.value = res.result;
        console.log(MaterialPropertydata);
      });
      GetDictionary("状态").then((res) => {
        Statedata.value = res.result;
        console.log(Statedata);
      });
    };
    MaterialList();

    //新增按钮事件
    const router = useRouter();
    const AddMaterial = () => {
      router.push({
        path: "/AddMaterial",
    
      });
    };

    const query = reactive({
      pageindex: 1,
      pagesize: 10,
      name: "",
      materialtype: '',
      state: null,
      materialclassify: null,
      materialProperty: '',
    });

    const showsta = ref(false);

    const tableData = ref([]);
    const totalCount = ref(0);

    const options = ref([]);

    // 获取表格数据
    const getData = () => {
      ShowMaterial(query).then((res) => {
        tableData.value = res.result.items;
        totalCount.value = res.result.totalCount || 50;
        console.log(tableData);
      });

      Materialtype().then((res) => {
        options.value = res.result;
      });
    };
    getData();

    // 查询操作
    const handleSearch = () => {
      getData();
    };
    const formInline = reactive({
      codingName: "",
      generateType: "",
      targetForm: "",
    });
    // 分页导航
    const handleSizeChange = (val) => {
      query.pagesize = val;
      query.pageindex = 1;
      getData();
    };
    // 分页导航
    const handleCurrentChange = (val) => {
      query.pageindex = val;
      getData();
    };
    // 删除操作
    const handleDelete = (index) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          ElMessage.success("删除成功");
          tableData.value.splice(index, 1);
        })
        .catch(() => {});
    };

    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    //字段
    let form = reactive({
      targetForm: "",
      codingName: "",
      generateType: "",
      initialNumber: undefined,
    });
    let idx = -1;
    const handleEdit = (index, row) => {
      idx = index;
      CodingGetId(row.id).then((item) => {
        Object.assign(form, item.result);
      });
      editVisible.value = true;
    };
    const saveEdit = () => {
      editVisible.value = false;
      PutCoding(form).then((item) => {
        ElMessage.success("修改成功");
        getData();
      });
    };
    const down = () => {
      download().then((res) => {
        if (res) {
          const elink = document.createElement("a");
          elink.download = "物料信息.xlsx";
          elink.style.display = "none";
          const blob = new Blob([res], { type: "application/x-msdownload" });
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
        } else {
          this.$message.error("导出异常请联系管理员");
        }
      });
      //console.log(res)
    };
    return {
  
      //字典data
      Materialtypedata,
      MaterialPropertydata,
      Statedata,
      query,
      tableData,
      totalCount,
      editVisible,
      form,
      formInline,
      options,
      showsta,
      router,
      InquirEvent,
      AddMaterial,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleDelete,
      handleEdit,
      saveEdit,
      ToDetailsMaterial,

      down,
    };
  },
};
</script>
